<template>
  <div class="NavMenu-Demo-Page ">
       <SkyCardPanel title="顶部导航菜单">
       <div slot="main">
        <div class="block">

          <sky-menu default-active="2" class="sky-menu-horizontal-demo" mode="horizontal" @open="handleOpen" @close="handleClose" background-color="#001529" text-color="#fff" active-text-color="#fff">
            <sky-submenu index="1">
              <template slot="title">
                <i class="sky-icon-location"></i>
                <span :class="['icon_title','icon_title_arrow']">导航一</span>
              </template>
              <sky-menu-item-group>
                <sky-menu-item index="1-1">选项1</sky-menu-item>
              </sky-menu-item-group>
               <sky-menu-item-group>
                <sky-menu-item index="1-2">选项2</sky-menu-item>
              </sky-menu-item-group>
              <sky-menu-item-group>
                <sky-menu-item index="1-3">选项3</sky-menu-item>
              </sky-menu-item-group>
              <sky-submenu index="1-4">
                <template slot="title">选项4</template>
                <sky-menu-item index="1-4-1">选项1</sky-menu-item>
              </sky-submenu>
            </sky-submenu>
            <sky-menu-item index="2">
              <i class="sky-icon-menu"></i>
              <span slot="title" class="icon_title">导航二</span>
            </sky-menu-item>
            <sky-menu-item index="3" disabled>
              <i class="sky-icon-document"></i>
              <span slot="title" class="icon_title">导航三</span>
            </sky-menu-item>
            <sky-menu-item index="4">
              <i class="sky-icon-setting"></i>
              <span slot="title" class='icon_title'>导航四</span>
            </sky-menu-item>
          </sky-menu>

        </div>
      </div>
    </SkyCardPanel>
    <SkyCardPanel title="侧边导航菜单">
      <div slot="main">
        <div class="block">

          <sky-menu default-active="2" class="sky-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#001529" text-color="#fff" active-text-color="#fff">
            <sky-submenu index="1">
              <template slot="title">
                <i class="sky-icon-location"></i>
                <span  :class="['icon_title']">导航一</span>
              </template>
              <sky-menu-item-group>
                <!-- <template slot="title">分组一</template> -->
                <sky-menu-item index="1-1">选项1</sky-menu-item>
                <sky-menu-item index="1-2">选项2</sky-menu-item>
              </sky-menu-item-group>
              <sky-menu-item-group>
                <sky-menu-item index="1-3">选项3</sky-menu-item>
              </sky-menu-item-group>
              <sky-submenu index="1-4">
                <template slot="title">选项4</template>
                <sky-menu-item index="1-4-1">选项1</sky-menu-item>
              </sky-submenu>
            </sky-submenu>
            <sky-menu-item index="2">
              <i class="sky-icon-menu"></i>
              <span slot="title" :class="['icon_title']">导航二</span>
            </sky-menu-item>
            <sky-menu-item index="3" disabled>
              <i class="sky-icon-document"></i>
              <span slot="title" :class="['icon_title']">导航三</span>
            </sky-menu-item>
            <sky-menu-item index="4">
              <i class="sky-icon-setting"></i>
              <span slot="title" :class="['icon_title']">导航四</span>
            </sky-menu-item>
          </sky-menu>

        </div>
      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
          &lt;sky-menu default-active="2" class="sky-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#001529" text-color="#fff" active-text-color="#fff"&gt;
            &lt;sky-submenu index="1"&gt;
              &lt;template slot="title"&gt;
                &lt;i class="sky-icon-location"&gt;&lt;/i&gt;
                &lt;span&gt;导航一&lt;/span&gt;
              &lt;/template&gt;
              &lt;sky-menu-item-group&gt;
                &lt;!-- &lt;template slot="title"&gt;分组一&lt;/template&gt; --&gt;
                &lt;sky-menu-item index="1-1"&gt;选项1&lt;/sky-menu-item&gt;
                &lt;sky-menu-item index="1-2"&gt;选项2&lt;/sky-menu-item&gt;
              &lt;/sky-menu-item-group&gt;
              &lt;sky-menu-item-group&gt;
                &lt;sky-menu-item index="1-3"&gt;选项3&lt;/sky-menu-item&gt;
              &lt;/sky-menu-item-group&gt;
              &lt;sky-submenu index="1-4"&gt;
                &lt;template slot="title"&gt;选项4&lt;/template&gt;
                &lt;sky-menu-item index="1-4-1"&gt;选项1&lt;/sky-menu-item&gt;
              &lt;/sky-submenu&gt;
            &lt;/sky-submenu&gt;
            &lt;sky-menu-item index="2"&gt;
              &lt;i class="sky-icon-menu"&gt;&lt;/i&gt;
              &lt;span slot="title"&gt;导航二&lt;/span&gt;
            &lt;/sky-menu-item&gt;
            &lt;sky-menu-item index="3" disabled&gt;
              &lt;i class="sky-icon-document"&gt;&lt;/i&gt;
              &lt;span slot="title"&gt;导航三&lt;/span&gt;
            &lt;/sky-menu-item&gt;
            &lt;sky-menu-item index="4"&gt;
              &lt;i class="sky-icon-setting"&gt;&lt;/i&gt;
              &lt;span slot="title"&gt;导航四&lt;/span&gt;
            &lt;/sky-menu-item&gt;
          &lt;/sky-menu&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
            export default {
              data () {
                return {

                };
              },
              methods: {
                handleOpen (key, keyPath) {
                  console.log(key, keyPath);
                },
                handleClose (key, keyPath) {
                  console.log(key, keyPath);
                }
              }
            };
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>
 

  </div>
</template>

<script>
  export default {
    data () {
      return {

      };
    },
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath);
      }
    }
  };
</script>

<style lang="scss" scoped>
.NavMenu-Demo-Page {
  & /deep/ .card-main {
    padding: 20px !important;
  }
}

.hr {
  margin: 20px 0;
}
</style>